<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Azil</title>
		<meta content="width=device-width, initial-scale=1.0" name="viewport">
		<meta content="" name="keywords">
		<meta content="" name="description">

		<link href="img/azil-blue-ico.png" rel="icon">
		<link href="img/azil-blue-ico.png" rel="apple-touch-icon">

		<link href="//cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

		<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
		<link href="//cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
		<link href="//cdn.bootcss.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet">

		<!-- 主题选择 -->
		<!-- <link href="css/style.css" rel="stylesheet"> -->
		<!-- <link href="css/style-orange.css" rel="stylesheet"> -->
		<!-- <link href="css/style-green.css" rel="stylesheet"> -->
		<!-- <link href="css/style-purple.css" rel="stylesheet"> -->
		<!-- <link href="css/style-red.css" rel="stylesheet"> -->
		<link href="css/style-sky-blue.css" rel="stylesheet">
	</head>

	<body id="page-top">
		<!--/ Github Star /-->
		<div class="d-none d-lg-block" style="position: fixed; width: 70px;height: 70px; top: 0; left: 0; z-index: 1099;">
			<a href="https://github.com/topoadmin" class="github-corner" aria-label="View source on GitHub"><svg width="70" height="70" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
		</div>
		<!--/ Github End /-->

		<!--/ 导航 Star /-->
		<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
			<div class="container">
				<a class="navbar-brand js-scroll" href="#page-top">不要叫我宅男，请叫我闭家锁</a>
				<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
				 aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
					<span></span>
					<span></span>
					<span></span>
				</button>
				<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link js-scroll active" href="#home">首页</a>
						</li>
						<li class="nav-item">
							<a class="nav-link js-scroll" href="#about">关于我</a>
						</li>
						<li class="nav-item">
							<a class="nav-link js-scroll" href="#service">服务</a>
						</li>
						<li class="nav-item">
							<a class="nav-link js-scroll" href="#experience">服务</a>
						</li>
						<li class="nav-item">
							<a class="nav-link js-scroll" href="#work">案例</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!--/ 导航 End /-->
		
		<!--/ 简单介绍 Star /-->
		<div id="home" class="intro route bg-image" style="background-image: url(img/bg.jpg)">
			<div class="overlay-itro"></div>
			<div class="intro-content display-table">
				<div class="table-cell">
					<div class="container">
						<img src="img/azil-white.png" alt="">
						<h1 class="intro-title mb-4"></h1>
						<p class="intro-subtitle"><span class="text-slider-items">网页开发,小程序开发,App开发,公众号开发</span><strong class="text-slider"></strong></p>
						<p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">了解更多</a></p>
					</div>
				</div>
			</div>
		</div>
		<!--/ 简单介绍 End /-->
		
		<div class="body">
			<!--/ 关于我 Star /-->
			<section id="about" class="about-mf sect-pt4 route">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="box-shadow-full">
								<div class="row">
									<div class="col-md-6">
										<div class="row">
											<div class="col-sm-6 col-md-5">
												<div class="about-img">
													<img src="img/azil-blue-ico.png" class="img-fluid rounded b-shadow-a" alt="">
												</div>
											</div>
											<div class="col-sm-6 col-md-7">
												<div class="about-info">
													<p><span class="title-s">名字: </span> <span>高XX</span></p>
													<p><span class="title-s">职业: </span> <span>Web前端开发人员</span></p>
													<p><span class="title-s">邮箱: </span> <span>13701378834@163.com</span></p>
													<p><span class="title-s">手机: </span> <span>13701378834</span></p>
												</div>
											</div>
										</div>
										<div class="skill-mf">
											<p class="title-s">技能</p>
											<span>HTML</span> <span class="pull-right">85%</span>
											<div class="progress">
												<div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<span>CSS3</span> <span class="pull-right">75%</span>
											<div class="progress">
												<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<span>JAVASCRIPT</span> <span class="pull-right">60%</span>
											<div class="progress">
												<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<span>uni-app</span> <span class="pull-right">20%</span>
											<div class="progress">
												<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="about-me pt-4 pt-md-0">
											<div class="title-box-2">
												<h5 class="title-left">
													关于我
												</h5>
											</div>
											<p class="lead">
												我性格开朗，亦静亦动，本着一颗诚心与人交往，有较强的表达能力，同时也很乐意倾听，懂得自我反省。
											</p>
											<p class="lead">
												我品尝过失败，经历过迷惘，但最终在集体生活中慢慢成长起来，形成了良好的性格品质。 
											</p>
											<p class="lead">
												无论在生活还是工作中，都会细心地做好每一件事。在今后的职业生涯规划中，希望成为一名优秀、称职的工作人员，在工作中充分发挥进取精神及创造力。 
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--/ 关于我 End /-->
			
			<!--/ 服务 Star /-->
			<section id="service" class="services-mf route">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="title-box text-center">
								<h3 class="title-a">
									服务
								</h3>
								<div class="line-mf"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="service-box">
								<div class="service-ico">
									<span class="ico-circle"><i class="ion-monitor"></i></span>
								</div>
								<div class="service-content">
									<h2 class="s-title">Web 开发</h2>
									<p class="s-description text-center">
										Web 开发
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="service-box">
								<div class="service-ico">
									<span class="ico-circle"><i class="ion-android-phone-portrait"></i></span>
								</div>
								<div class="service-content">
									<h2 class="s-title">H5 开发</h2>
									<p class="s-description text-center">
										H5 开发
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="service-box">
								<div class="service-ico">
									<span class="ico-circle"><i class="ion-code-working"></i></span>
								</div>
								<div class="service-content">
									<h2 class="s-title">App 开发</h2>
									<p class="s-description text-center">
										App 开发
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="service-box">
								<div class="service-ico">
									<span class="ico-circle"><i class="ion-android-phone-portrait"></i></span>
								</div>
								<div class="service-content">
									<h2 class="s-title">小程序开发</h2>
									<p class="s-description text-center">
										小程序开发
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--/ 服务 End /-->
			
			<!--/ 经验 Star /-->
			<div id="experience" class="section-counter paralax-mf bg-image" style="background-image: url(img/work-5.jpg)">
				<div class="overlay-mf"></div>
				<div class="container">
					<div class="row">
						<div class="col-sm-4 col-lg-4">
							<div class="counter-box counter-box pt-4 pt-md-0">
								<div class="counter-ico">
									<span class="ico-circle"><i class="ion-checkmark-round"></i></span>
								</div>
								<div class="counter-num">
									<p class="counter">40</p>
									<span class="counter-text">完成总项目</span>
								</div>
							</div>
						</div>
						<div class="col-sm-4 col-lg-4">
							<div class="counter-box pt-4 pt-md-0">
								<div class="counter-ico">
									<span class="ico-circle"><i class="ion-ios-calendar-outline"></i></span>
								</div>
								<div class="counter-num">
									<p class="counter">5</p>
									<span class="counter-text">年工作经验</span>
								</div>
							</div>
						</div>
						<div class="col-sm-4 col-lg-4">
							<div class="counter-box pt-4 pt-md-0">
								<div class="counter-ico">
									<span class="ico-circle"><i class="ion-ios-people"></i></span>
								</div>
								<div class="counter-num">
									<p class="counter">15</p>
									<span class="counter-text">总客户</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--/ 经验 End /-->
			
			<!--/ 案例 Star /-->
			<section id="work" class="portfolio-mf sect-pt4 route">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12">
							<div class="title-box text-center mb-5">
								<h3 class="title-a">案例</h3>
								<div class="line-mf"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<iframe src="../index.html" width="100%" height="500" frameborder="0" framespacing="0"></iframe>
					</div>
				</div>
			</section>
			<!--/ 案例 End /-->
			
			<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
			<div id="preloader"></div>
		</div>

		<!-- JavaScript Libraries -->
		<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="//cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script>
		<script src="//cdn.bootcss.com/waypoints/4.0.1/jquery.waypoints.min.js"></script>
		<script src="//cdn.bootcss.com/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
		<script src="//cdn.bootcss.com/typed.js/2.0.10/typed.min.js"></script>

		<!-- Template Main Javascript File -->
		<script src="js/main.js"></script>

	</body>
</html>
